<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<jsp:include page="/public/template/header.jsp" />


<style type="text/css">

input.text 
{
	width: 400px;
}

input.button 
{
	width: 80px;
}

table,td,tr,th {
	border-style: solid;
	border-width: 0px;
	border-color: black;
	margin: 0;
	border-collapse: collapse;
	padding: 6px;
}

.table_properties {
	border-style: solid;
	border-width: 1px;
	border-color: black;
	margin: 1;
	border-collapse: collapse;
	padding: 6px;
}

#content {
	padding: 10px;
}
</style>


<div id="content" style="height: 1500px;">

	<h1>Virtual Data Property: Create a Virtual Data Property</h1>

	<form action="<c:url value='/config/resources/${id}/virtualDataProperties/create'/>" method="post">
		<div style="position: absolute; top: 150px; width: 450px;">

			
			<table style="position: absolute; width: 90%">
			
				<tr>
					<td>Property:</td>
					<td>
						<input id="parentProperty" name="vdp.parentProperty" type="text" style="width: 400px" />
					</td>
				</tr>

				<tr>
					<td>Formula: </td>
					<td><input name="vdp.formula"  type="text" style="width: 400px" /></td>
				</tr>
				
				<tr>
					<td>Refresh Rate: </td>
					<td><input name="vdp.refreshRate"  type="text" style="width: 400px" /></td>
				</tr>
				
				<tr>
					<td><input type="submit" value="Create" style="width: 150px;" /></td>
				</tr>
			</table>

		</div>
	
	<div style="position:absolute; top: 400px; width: 90%; ">
			<a href="javascript:void(0)" id="addParameter">Add Parameter</a>
			<table id="parameterTable">
				<tr>
					<td><span style="font-weight: bold">Parameter</span></td>
					<td><span style="font-weight: bold">Query</span></td>
				</tr>
			</table>
	</div>
	
	<div style="position:absolute; top: 800px; width: 90%; ">
			<a href="javascript:void(0)" id="addCondition">Add Conditional</a>
			<table id="conditionTable">
				<tr>
					<td><span style="font-weight: bold">Condition</span></td>
					<td><span style="font-weight: bold">Value</span></td>
				</tr>
			</table>
	</div>
	
		
	</form>
		

</div>



<script type="text/javascript">
	$(function() {
		var countParam = 0;
		var countCond = 0;
		
		$("#addParameter").button();
		$("#addParameter").click(function(){	
			$("#parameterTable").last().append("<tr> <td><span style='font-weight: bold'><input name='vdp.formulaParameters["+countParam+"].paramLabel' type='text'/></span></td><td><span style='font-weight: bold'><input  name='vdp.formulaParameters["+countParam+"].paramQuery'  type='text' style='width: 200px;'/></span></td></tr>");
			countParam+= 1;
		});
		
		
		$("#addCondition").button();
		$("#addCondition").click(function(){																						
			$("#conditionTable").last().append("<tr> <td><span style='font-weight: bold'><input name='vdp.conditions["+countCond+"].conditionRestriction' type='text'/></span></td><td><span style='font-weight: bold'><input name='vdp.conditions["+countCond+"].value' type='text' style='width: 200px;'/></span></td></tr>");
			countCond+= 1;
		});
		
		var properties = ${properties};
		$("#parentProperty").autocomplete({
			minLength : 0,
			source : properties,
		});

	});
</script>

<jsp:include page="/public/template/footer.jsp" />